INF385T UX Prototyping
HW Instructions
Spring 2023
Ninety percent of your grade comes from the following work. The other ten percent consists of peer reviews, described in the syllabus. Also note that the syllabus describes the attendance policy. That can negatively impact the grade you earn.
Milestones (35 percent of your grade)
Overview
For seven of the weeks we meet, you will submit a milestone in Canvas. Note that all work is to be submitted via Canvas. Don’t send me any attachments in emails or I will deduct points from the relevant score!
I will assign six groups of five.
You will complete a prototype milestone by Monday at 9pm via Canvas, via a plain text document (not a word processing document) containing the URL of the page for the current milestone on your group website. That website will contain (A) text describing your current milestone and (B) a link to your actual prototype, for example on Figma or Framer. Only one person from your group will submit the plain text document to Canvas, and it will be named with that person’s initials in lowercase followed by dot txt. In other words, if I were to make such a submission, it would be called mm.txt and would not be in Word or pdf format but rather plain text, as can be generated in any text editor such as notepad or textedit. There should be only one line in the file, and that line should contain only one URL, so that I can automatically parse all the submitted files.
Details
The milestones are mostly connected to each other, with the eventual goal of a portfolio piece.
Milestone 1 — accessibility
Unlike most milestones, for this one you will evaluate a website for accessibility. The purpose of this is to awaken you to the need for accessibility before you start creating your own prototypes so that you bake accessibility into your prototypes rather than having to scramble to add it as an afterthought.
You will run an accessibility check on a website of your choosing. You can use this ATAG report tool to help you https://www.w3.org/WAI/atag/report-tool/principle/1
- Evaluate three pages of any website using at least 3 WCAG 2.1 criteria on each page, e.g., 1.4.11 non text contrast.
- Let us know if the page passes and why it passed.
- Create screens for how you would improve its accessibility and justify your solution.
- Deliver (a) your analysis as a pdf report, named xx.pdf, where the xx is replaced by the submitter’s initials, and (b) 3 mid-fi wireframes, one for each page, of your improved solution. The report should be a pdf submitted to Canvas, while the wireframes should be a Figma or Framer or XD (or other) prototype. Submit a plain text file named xx.txt, where the xx is replaced by the submitter’s initials in lowercase, and including ONLY the link to the prototype. If it is problematic to organize the three mid fi wireframes under one link, make the one link go to a webpage that has three links, preferably your group’s project site. Make sure the instructor can view the prototype. Afterward, you should add the pdf and the link to the milestone 1 page of your group’s website.
FAQ
What does mid-fi mean in this context? Focus on color, typography, and layout, without consideration of animation or navigation unless the accessibility improvements require them.
For each page we evaluate, can we use the same WCAG criteria on each page? NO!
What happens if our website is perfect and is completely accessible? Try another website.
What tools should we use? Use any tools you want, such as WAVE, Andi, Contrast, Manual, or others.
Are we limited to AA or A criteria? Use whichever you want for each page.
Can you give us an example of a fantastic job on this milestone? Yes, look in Canvas at the files m1exampleReport.pdf and m1examplePrototype.txt.
Other tips
- Provide the reader context and your reasoning for your evaluation.
- It would be valuable to see your justification and logic.
- Refer back to the original issue when presenting your solution.
- Consider inclusive design.
- Visual impairment errors that fail WCAG are comparatively easy to fix.